<template>
    <div>
      <div class="gva-table-box">
        <div style="margin-bottom: 20px;">
          <el-select
            v-model="searchInfo.game_id"
            style="width: 18%;margin-right: 20px"
            placeholder="请选择游戏"
            clearable
          >
            <el-option
              v-for="item in gameIdsArr"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            v-if="isShowDate"
            v-model="date"
            style="margin-right: 20px;"
            type="date"
            placeholder="选择日期"
            @change="searchChange"
          />
          <el-input
            v-model="searchInfo.keyword"
            placeholder="请输入账户或账户ID"
            style="width: 15%;margin-right: 20px;"
          />
          <el-button
            type="primary"
            @click="search()"
          >
            查询
          </el-button>
        </div>
        <el-tabs
          v-model="activeName"
          type="card"
          class="demo-tabs"
          style="width: 100%"
          @tab-click="handleTabClick"
        >
            <el-tab-pane label="巨量" name="1">
                <div class="gva-table-box">
                    <div class="gva-btn-list">
                        <el-popover v-model:visible="deleteVisible1" placement="top" width="160">
                        <p>确定要删除吗？</p>
                        <div style="text-align: right; margin-top: 8px;">
                            <el-button type="primary" link @click="deleteVisible1 = false">取消</el-button>
                            <el-button type="primary" @click="onDelete">确定</el-button>
                        </div>
                        <template #reference>
                            <el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="deleteVisible1 = true">删除</el-button>
                        </template>
                        </el-popover>
                    </div>
                    <el-table
                    border
                    ref="multipleTable"
                    style="width: 100%"
                    tooltip-effect="dark"
                    :data="hugeTableData"
                    row-key="ID"
                    @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55" />
                        <el-table-column align="left" label="账户ID" prop="accountId" width="200" />
                        <el-table-column align="left" label="评论时间" prop="createTime" width="200" />
                        <el-table-column align="left" label="内容" prop="text" min="400" />
                        <el-table-column align="left" label="图片" width="150">
                            <template #default="scope">
                                <CustomPic
                                v-if="scope.row.commentImage"
                                style="margin-top:8px;"
                                :pic-src="scope.row.commentImage"
                                @click="openUrl(scope.row.commentImage)"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column align="left" label="评论用户" prop="awemeName" width="200" />
                        <el-table-column align="left" label="视频标题" prop="itemTitle" width="250" />
                    </el-table>
                </div>            
            </el-tab-pane>
            <el-tab-pane label="磁力" name="3">
                <div class="gva-table-box">
                    <div class="gva-btn-list">
                        <el-popover v-model:visible="deleteVisible2" placement="top" width="160">
                        <p>确定要删除吗？</p>
                        <div style="text-align: right; margin-top: 8px;">
                            <el-button type="primary" link @click="deleteVisible2 = false">取消</el-button>
                            <el-button type="primary" @click="onDelete">确定</el-button>
                        </div>
                        <template #reference>
                            <el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="deleteVisible2 = true">删除</el-button>
                        </template>
                        </el-popover>
                    </div>
                    <el-table
                    border
                    ref="multipleTable"
                    style="width: 100%"
                    tooltip-effect="dark"
                    :data="kuaishouData"
                    row-key="commentId"
                    @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55" />
                        <el-table-column align="left" label="账户ID" prop="accountId" width="200" />
                        <el-table-column align="left" label="评论时间" prop="createTime" width="200" />
                        <el-table-column align="left" label="内容" prop="commentContent" min="400" />
                        <el-table-column align="left" label="图片" width="150">
                            <template #default="scope">
                                <CustomPic
                                v-if="scope.row.emotionUrl"
                                style="margin-top:8px;"
                                :pic-src="scope.row.emotionUrl"
                                @click="openUrl(scope.row.emotionUrl)"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column align="left" label="评论用户" prop="nickname" width="200" />
                        <el-table-column align="left" label="视频ID" prop="photoID" width="250" />
                    </el-table>
                </div>       
            </el-tab-pane>
        </el-tabs>
        <div class="gva-pagination">
          <el-pagination
            layout="total, prev, pager, next, jumper"
            :total="total"
            :page-size="pageSize"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </template>
<script lang="ts" setup>
    import { ref } from 'vue'
    import { ElMessage, ElMessageBox } from 'element-plus'
    import { getHugeInfo } from '@/api/qmAccessTokens'
    import JSONBIG from 'json-bigint'
    import { useUserStore } from '@/pinia/modules/user'
    import { useRouter } from 'vue-router'
    import CustomPic from '@/components/customPic/index.vue'
    import {
        getQmGameListList
    } from '@/api/qmGameList'

    const router = useRouter()

    const openUrl = async(url) => {
        window.open(url, '_blank')
    }

    const activeName = ref('1')

    const handleTabClick = (tab, event) => {
        multipleSelection.value= []
        activeName.value = tab.props.name
        searchInfo.value.platform = tab.props.name
        searchInfo.value.page = 1
        isShowDate.value = true
        searchInfo.value.date = ''
        if (activeName.value === '1') {
            getHugeTableData()
        } else {
            getKuaishouTableData()
        }
    }
    // 获取今天的日期
    const date = ref()
    const page = ref(1)
    const pageSize = ref(10)
    const total = ref(0)

    
    // 多选数据
    const multipleSelection = ref([])
    // 多选
    const handleSelectionChange = (val) => {
        multipleSelection.value = val
    }

    // 批量删除控制标记
    const deleteVisible1 = ref(false)
    const deleteVisible2 = ref(false)

    // 多选删除
    const onDelete = async() => {
        var ids = ''
        if (multipleSelection.value.length === 0) {
            ElMessage({
                type: 'warning',
                message: '请选择要删除的数据'
            })
            return
        }
        if (multipleSelection.value && Array.isArray(multipleSelection.value)) {
            ids = multipleSelection.value.map(item => item.id).join(',');
        }
        searchInfo.value.ids = ids;
        getHugeInfo({ params: JSON.stringify(searchInfo.value), type: 'commentDel' }).then(res => {
        if (res.code == 0) {
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                })
                if (activeName.value === '1') {
                    if (hugeTableData.value.length === ids.length && page.value > 1) {
                        page.value--
                    }
                    deleteVisible1.value = false
                    getHugeTableData()
                }else{
                    if (kuaishouData.value.length === ids.length && page.value > 1) {
                        page.value--
                    }
                    deleteVisible2.value = false
                    getKuaishouTableData()
                }
            }
        })
    }

    const hugeTableData = ref([])
    const kuaishouData = ref([])

    const isShowDate = ref(true)
    const searchInfo = ref({
        platform: '1',
        date: "",
        page: 1,
        page_size: pageSize.value,
        keyword: '',
        game_id:'',
        ids:''
    })

    const handleCurrentChange = (val) => {
        page.value = val
        searchInfo.value.page = val
        if (activeName.value === '1') {
            getHugeTableData()
        } else {
            getKuaishouTableData()
        }
    }

    const userStore = useUserStore()
    const gameIdsArr = ref([])
    const getGameList = async() => {
        const gameIds = userStore.userInfo.gameIds
        const arr = []
        const res = await getQmGameListList({ page: 1, pageSize: 9999 })
        if (res.code === 0) {
            res.data.list.forEach(item => {
            arr.push({
                id: item.id,
                label: item.name,
                value: item.game_hash
            })
            })
        }
        if (gameIds.length === 0) {
            gameIdsArr.value = arr
        } else {
            gameIds.forEach(item => {
            arr.forEach(i => {
                if (i.id === item.QmGameId) {
                gameIdsArr.value.push(i)
                }
            })
            })
        }
    }
    getGameList()

    const temHugeTableData = ref([])
    const temKuaishouData = ref([])
    const showData = ref(false)
    var searchChange = function(date) {
        // 格式化时间
        if(date){
            searchInfo.value.date = date.toLocaleDateString('en-CA')
        }else{
            searchInfo.value.date =""
        }
    }

    // 查询
    const getHugeTableData = function() {
        getHugeInfo({ params: JSON.stringify(searchInfo.value), type: 'commentList' }).then(res => {
            if (res.code == 0) {
                const info = JSONBIG.parse(res.data.info)
                total.value = info.total ?? 0
                hugeTableData.value = info.list
            }
        })
    }

    const getKuaishouTableData = function() {
        getHugeInfo({ params: JSON.stringify(searchInfo.value), type: 'commentList' }).then(res => {
            if (res.code == 0) {
                const info = JSONBIG.parse(res.data.info)
                total.value = info.total ?? 0
                kuaishouData.value = info.list
            }
        })
    }

    const search = () => {
        if (activeName.value === '1') {
            getHugeTableData()
        } else if (activeName.value === '3') {
            getKuaishouTableData()
        }
    }
    getHugeTableData()
</script>
<style>
    .el-col {
        text-align: center;
    }
</style>
  